<template>
  <div class="uploadPreviewWrap">
    <img v-for="(item, index) of imgs" :key="'i' + index" :src="item" class="imgItem" @click="showimggallery(index)">
    <img v-for="(item, index) of videos" :key="'v' + index" :src="play" class="imgItem" @click="showVideoGallery(index)">

    <div class="weui-gallery" v-show="videoGalleryShow">
      <div class="weui-gallery-video-wrap">
        <video src="" controls="controls" preload="load" autoplay ref="galleryVideo"></video>
      </div>
      <div class="weui-gallery__opr">
        <a href="javascript:" class="weui-gallery__del" @click="hideVideoGallery">
          <i class="iconfont icon-delete"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import 'vant/lib/image-preview/index.css'
export default {
  name: 'MyAttachments',
  props: ['attachments', 'attachtype'],
  data () {
    return {
      imgs: [],
      videos: [],
      instance: '',
      play: require('imgs/play.jpg'),
      videoGalleryShow: false
    }
  },
  mounted () {
    for (let i = 0; i < this.attachments.length; i++) {
      const ele = this.attachments[i]
      if (this.attachtype && ele.busType !== this.attachtype) continue

      let atype = ''
      if (ele.fileType) atype = this.cm.getFileType(ele.fileType)
      else atype = this.cm.getFileType2(ele.fileName)
      if (atype === 'image') {
        this.imgs.push(this.cm.getFullFileUrl(ele.filePath))
      } else if (atype === 'video') {
        this.videos.push(this.cm.getFullFileUrl(ele.filePath))
      }
    }
  },
  destroyed () {
    if (this.instance !== '') this.instance.close()
  },
  methods: {
    showimggallery (i) {
      this.instance = ImagePreview({
        images: this.imgs,
        startPosition: i,
        onClose () {
          // do something
        }
      })
    },
    showVideoGallery (i) {
      var vsrc = this.videos[i]
      this.$refs.galleryVideo.setAttribute('src', vsrc)
      this.videoGalleryShow = true
      this.$refs.galleryVideo.play()
      this.$emit('fullScreenPlay')
    },
    hideVideoGallery () {
      this.videoGalleryShow = false
      this.$refs.galleryVideo.pause()
      this.$emit('fullScreenStop')
    }
  }
}
</script>

<style lang="stylus" scoped>
/* 图片预览列表 */
.uploadPreviewWrap
  white-space: pre-wrap
  text-align left
  padding-left 1em
  .imgItem
    width 1rem
    height 1rem
    margin-right 1em
    margin-bottom 1em
  .weui-gallery
    display flex
    flex-direction column
    z-index 10000
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    .weui-gallery-video-wrap
      height calc(100vh - 60px)
      display flex
      video
        width 100%
        align-self center
    .weui-gallery__opr
      line-height 1.2
      .icon-delete
        color white
        font-size 1rem
</style>
